<template>
  <div class="layout">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="目录" name="first">
        <catalogue-component></catalogue-component>
      </el-tab-pane>
      <el-tab-pane label="互动课件" name="second">
        <interactive-courseware></interactive-courseware>
      </el-tab-pane>
      <el-tab-pane label="作业" name="third">
        <home-work></home-work>
      </el-tab-pane>
      <el-tab-pane label="测试" name="fourth">
        <test-component></test-component>
      </el-tab-pane>
      <el-tab-pane label="资料" name="fifth">
        <material-component></material-component>
      </el-tab-pane>
      <el-tab-pane label="腾讯会议" name="sixth">
        <tencent-conference></tencent-conference>
      </el-tab-pane>
      <el-tab-pane label="公告" name="seventh">
        <announce-ment></announce-ment>
      </el-tab-pane>
      <el-tab-pane label="话题" name="eighth">
        <topic-component></topic-component>
      </el-tab-pane>
      <el-tab-pane label="互动答题" name="ninth">
        <interactive-answer></interactive-answer>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CatalogueComponent from "@/components/courseContent/CatalogueComponent.vue";
import InteractiveCourseware from "@/components/courseContent/InteractiveCourseware.vue";
import HomeWork from "@/components/courseContent/HomeWork.vue";
import TestComponent from "@/components/courseContent/TestComponent.vue";
import MaterialComponent from "@/components/courseContent/MaterialComponent.vue";
import TencentConference from "@/components/courseContent/TencentConference.vue";
import AnnounceMent from "@/components/courseContent/AnnounceMent.vue";
import TopicComponent from "@/components/courseContent/TopicComponent.vue";
import InteractiveAnswer from "@/components/courseContent/InteractiveAnswer.vue";

export default {
  components: {
    InteractiveAnswer,
    TopicComponent,
    AnnounceMent,
    TencentConference, MaterialComponent, TestComponent, HomeWork, InteractiveCourseware, CatalogueComponent
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
}
</script>

<style scoped>
.layout {
  margin: 12px 0 0 0;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: white;
}
</style>
